<%--
  Created by IntelliJ IDEA.
  User: 74018
  Date: 2018/12/8
  Time: 13:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>车辆库存</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common.jsp"/>
    <style>
        .datepicker{z-index:9999!important;}
    </style>
</head>
<body>

<div class="container">
    <table id="myTb"></table>
</div>
<form action="#" id="myForm" class="form-horizontal">
    <div class="pull-left col-sm-6">
        <div class="form-group col-sm-3">
            <input type="text" class="form-control" name="minMoney" placeholder="最低价">
        </div>
        <div class="form-group col-sm-3">
            <input type="text" name="maxMoney" class="form-control" placeholder="最高价">
        </div>
        <div class="form-group col-sm-3">
            <input type="text" class="form-control" name="carConfig.color" placeholder="颜色">
        </div>
        <div class="form-group col-sm-3">
            <input type="text" class="form-control input-group-btn" name="brand" placeholder="品牌">
        </div>
    </div>
    <div class="pull-right col-sm-6">
        <div class="form-group col-sm-3">
            <button type="button" class="btn btn-primary" onclick="search();"><i class="glyphicon glyphicon-search"></i>&nbsp;搜索</button>
        </div>
        <div class="form-group col-sm-3">
            <button type="button" class="btn btn-primary" onclick="toDel()"><i class="glyphicon glyphicon-pencil"></i>&nbsp;删除</button>
        </div>
        <div class="form-group col-sm-3">
            <button type="button" class="btn btn-primary" onclick="toAddCar();"><i class="glyphicon glyphicon-plus"></i>&nbsp;添加</button>
        </div>
        <div class="form-group col-sm-3">
            <button type="button" class="btn btn-primary" data-toggle="modal" onclick="toSales();" data-target="#salesModel2"><i class="glyphicon glyphicon-minus"></i>&nbsp;出售</button>
        </div>
    </div>
</form>

<!-- 增加模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h1 class="modal-title" id="modelTitleId">添加车辆</h1>
            </div>
            <div class="modal-body">
                <form id="addForm" action="#" class="wizard-big">
                    <h1>第一步</h1>
                    <fieldset>
                        <h2>第一步</h2>
                        <div class="row">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <label for="addBrand">汽车品牌 *</label>
                                    <input id="addBrand" name="brand" type="text" class="form-control " placeholder="汽车品牌">
                                </div>
                                <div class="form-group">
                                    <label for="addmodel">汽车车型 *</label>
                                    <input id="addmodel" type="text" name="model" class="form-control required" placeholder="汽车车型">
                                </div>
                                <div class="form-group">
                                    <label for="addLevel">汽车配置 *</label>
                                    <input id="addLevel" type="text" name="level" class="form-control required" placeholder="汽车配置">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="text-center">
                                    <div style="margin-top: 20px">
                                        <i class="fa fa-sign-in" style="font-size: 180px;color: #e5e5e5 "></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </fieldset>
                    <h1>第二步</h1>
                    <fieldset>
                        <h2>第二步</h2>
                        <div class="row">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <label for="addColr">汽车颜色</label>
                                    <input id="addColr" type="text" name="color" class="form-control required" placeholder="汽车颜色">
                                </div>
                                <div class="form-group">
                                    <label for="addprice">汽车进价 *</label>
                                    <input id="addprice" type="text" name="price" class="form-control required" placeholder="汽车进价">
                                </div>
                                <div class="form-group">
                                    <label for="addmoney">汽车售价 *</label>
                                    <input id="addmoney" type="text" name="money" class="form-control required" placeholder="汽车售价">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="text-center">
                                    <div style="margin-top: 20px">
                                        <i class="fa fa-sign-in" style="font-size: 180px;color: #e5e5e5 "></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <h1>第三步</h1>
                    <fieldset>
                        <h2>第三步</h2>
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="addCount">汽车数量 *</label>
                                <input id="addCount" type="text" name="count" class="form-control required" placeholder="汽车数量">
                            </div>
                            <div class="form-group">
                                <label for="addDate">添加日期 *</label>
                                <input id="addDate" type="date" name="date" class="form-control required" >
                            </div>
                            <div class="form-group">
                                <label for="addColr">处理员工</label>
                                <select name="staff" id="staffadd" class="form-control required"></select>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <%--<div class="form-group">
                                <label for="addNote">汽车介绍 *</label>
                                <textarea id="addNote" name="note" style="height:70%;"  class="form-control"></textarea>
                                &lt;%&ndash;<input id="addNote1" type="text" name="note" class="form-control" placeholder="汽车介绍">&ndash;%&gt;
                            </div>--%>
                        </div>
                    </fieldset>
                    <h1>第四步</h1>
                    <fieldset>
                        <h2>第四步</h2>
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="supplierAdd">供货商</label>
                                <select name="supplier" id="supplierAdd" class="form-control required"></select>
                            </div>
                            <div class="form-group">
                                <label for="addNote">汽车介绍 *</label>
                                <textarea id="addNote" name="note" style="height: 50%"  class="form-control"></textarea>
                                <%--<input id="addNote1" type="text" name="note" class="form-control" placeholder="汽车介绍">--%>
                            </div>
                        </div>
                        <div class="col-sm-4">

                        </div>
                    </fieldset>
                </form>

            </div>
            <div class="modal-footer">
                <button type="reset" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" onclick="seve()" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>


<!-- 销售 -->
<div class="modal fade" id="salesModel" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="modelTitleId2">出售汽车</h4>
            </div>
            <div class="modal-body">
                <form action="#" id="salesForm" class="form-horizontal">
                    <div class="form-group">
                        <label for="guests" class="col-sm-2 control-label">购买客户</label>
                        <div class="col-sm-10">
                            <select name="guests" class="form-control" id="guests"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="car" class="col-sm-2 control-label">销售车辆</label>
                        <div class="col-sm-10">
                            <p id="carinfo" class="form-control"></p>
                            <input type="hidden" id="car" name="car">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="count" class="col-sm-2 control-label">车辆数量</label>
                        <div class="col-sm-10">
                            <input type="text" id="count" name="count" class="form-control" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="date" class="col-sm-2 control-label">销售时间</label>
                        <div class="col-sm-10">
                            <div class="input-group date" id="datetimepicker">
                                <input class="form-control" id="date" type="text" name="date" />
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="moeny" class="col-sm-2 control-label">金额</label>
                        <div class="col-sm-10">
                            <input type="text" id="moeny" name="moeny" class="form-control" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="staff" class="col-sm-2 control-label">处理员工</label>
                        <div class="col-sm-10">
                            <select id="staff" name="staff" class="form-control">
                                <option value="0">请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="note" class="col-sm-2 control-label">备注信息</label>
                        <div class="col-sm-10">
                            <textarea class="form-control"  style="resize:none"  id="note" name="note"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doSales();">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 增加车辆 -->
<div class="modal fade" id="modelAdd2" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modelTitleId1"></h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="#" class="form-horizontal" id="addFrom">
                    <div class="form-group">
                        <input type="hidden" name="cid">
                        <input type="hidden" name="brand">
                        <input type="hidden" name="color">
                        <input type="hidden" name="model">
                        <input type="hidden" name="level">
                        <label for="addBrand2" class="col-sm-2 control-label">车辆信息</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" id="addBrand2" name="brand" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="supplier" class="col-sm-2 control-label">供货商</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="supplier" id="supplier"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="staff2" class="col-sm-2 control-label">处理员工</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="staff" id="staff2"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="price" class="col-sm-2 control-label">进价</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" id="price" name="price">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="count2" class="col-sm-2 control-label">数量</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" id="count2" name="count">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="date2" class="col-sm-2 control-label">时间</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="date" id="date2" name="date">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="note2" class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" id="note2" name="note">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doAdd();">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    $(function () {

        $('.date').datepicker({
            format: 'yyyy-mm-dd',
            locale: moment.locale('zh-cn')
        });

        $("#myTb").bootstrapTable({
            url:"${pageContext.request.contextPath}/car/query",
            toolbar: '#myForm',//工具按钮用哪个容器
            striped: false,//隔行换色
            //showRefresh: true,//是否显示刷新按钮
            height: 500,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",//每一行的唯一标识，一般为主键列
            //showToggle:true,//是否显示详细视图和列表视图的切换按钮
            //detailView:true,//是否显示父子表
            clickToSelect: true,
            pagination:true, //是否显示分页（*）
            pageSize : 9,//单页记录数
            pageList : [3, 6, 9, 12 ],//可选择单页记录数
            sidePagination:'server',
            rowStyle: function (row, index) {
                var style = {};
                if (row.carConfig.count<5){
                    style={css:{'color':'#ed5565'}};
                }else{
                    style={css:{'color':'#000'}};
                }
                return style;
            },
            queryParams:function(params){
                var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    offset:params.offset,//页面大小
                    limit:params.limit,//页码
                    brand:$("[name='brand']").val(),
                    minMoney:$("[name='minMoney']").val(),
                    maxMoney:$("[name='maxMoney']").val(),
                    "carConfig.color":$("[name='carConfig.color']").val()
                };
                console.log("offset"+params.offset);
                console.log("limit"+params.limit);
                return temp;
            },
            columns : [
                {
                checkbox: true
                }, {
                    field: "carConfig.id",
                    title: '编号'
                },{
                    field: 'brand',
                    title: '车辆品牌'
                }, {
                    field: 'model',
                    title: '车型'
                },{
                    field:'carConfig.level',
                    title:'车辆配置'
                },{
                    field:'carConfig.color',
                    title:'车辆颜色'
                },{
                    field:'carConfig.price',
                    title:'车辆价格'
                },{
                    field:'carConfig.count',
                    title:'车辆数量'
                },{
                    field:'carConfig.note',
                    title:'车辆介绍'
                }]
        })
    });

    function search() {
        var pageNo = $('#myTb').bootstrapTable('getOptions').pageNumber;
        var pageSize = $('#myTb').bootstrapTable('getOptions').pageSize;
        var formStr = $("#myForm").serialize();
        var mydata = decodeURIComponent(formStr,true);
        //"brand":brand,"carConfig.color":color,"minMoney":minMoney,"maxMoney":maxMoney
        $.post("${pageContext.request.contextPath}/car/query",{'data':mydata},function (data) {
            $("#myTb").bootstrapTable("load",data);
            $('#myTb').bootstrapTable('refreshOptions',{pageNumber:pageNo},{pageSize:pageSize});
            var pageNo = $('#myTb').bootstrapTable('getOptions').pageNumber;
            var pageSize = $('#myTb').bootstrapTable('getOptions').pageSize;
        });
    }
    function xiala1() {
        var i = 0;
        //打开一个对话框
        $("#addmodal").modal("show");
        //当对话框加载完成后，绑定年有角色
        $.post('${pageContext.request.contextPath}/guests/query',function(data){
            var s = "" ;
            $.each(data,function (index,item) {
                s = s + "<option value="+item.id+">"+item.name+"</option>";
                console.log(item.name);
            })
            $("select[name='guests']").html(s) ;
        }) ;

    }
    function seve() {
        var formStr = $("#addForm").serialize();
        var mydata = decodeURIComponent(formStr,true);
        console.log(mydata);
        $.ajax({
            url:"${pageContext.request.contextPath}/car/seve",
            data:mydata,
            success:function (data) {
                console.log(data);
                if(data>0){

                    swal("提示信息", "增加成功!", "success");
                    $.post("${pageContext.request.contextPath}/car/query",function (data1) {
                        $("#myTb").bootstrapTable("loda", data1);
                    })
                }else{
                    swal("提示信息", "增加失败!", "error");
                }
            }
        })
    }
    function toSales(){
        var row = $("#myTb").bootstrapTable("getSelections") ;
        if (row.length!=1){
            swal("提示信息", "请选择一条数据!", "error");
        }else{
            $("#staff option:eq(0)").nextAll().remove();
            $("#car").val(row[0].carConfig.id);
            $("#moeny").val(row[0].carConfig.price);
            $("#car").attr("data-count",row[0].carConfig.count)
            $("#carinfo").text(row[0].brand+"-"+row[0].model+"-"+row[0].carConfig.level+"-"+row[0].carConfig.color);
            $.post("${pageContext.request.contextPath}/user/queryuser",function(data){
                $.each(data,function (index,item) {
                    $("#staff").append('<option value='+item.id+'>'+item.workname+'</option>');
                });
            });
            xiala1();
            $("#salesModel").modal("show");

        }
    }
    function doSales(){
        var formStr=$('#salesForm').serialize();
        var params = decodeURIComponent(formStr,true);
        console.log(params)
        $.ajax({
            url:"${pageContext.request.contextPath}/carsales/sales",
            data:params,
            success:function (data) {
                if(data>0){
                    swal("提示信息", "修改成功!", "success");
                    $.post("${pageContext.request.contextPath}/car/query",function (data) {
                        $("#myTb").bootstrapTable("load", data.list);
                    })
                }else{
                    swal("提示信息", "修改失败!", "error");
                }
                $('#salesModel').modal('hide');
            }
        });
    }

    $.validator.addMethod("isNumber", function(value, element) {
        var length = value.length;
        var money = /^(\d|[1-9]\d+)(\.\d+)?$/;
        return  money.test(value);
    }, "请填写正确的格式(大于零的数字)");

    $(function () {
        $("#addForm").steps({
            bodyTag:"fieldset",
            transitionEffect: "slideLeft",
            onStepChanging:function(event,currentIndex,newIndex){
                if(currentIndex>newIndex){
                    return true
                }
                var form=$(this);
                if(currentIndex<newIndex){
                    $(".body:eq("+newIndex+") label.error",form).remove();
                    $(".body:eq("+newIndex+") .error",form).removeClass("error")
                }
                form.validate().settings.ignore=":disabled,:hidden";
                return form.valid()
            },onFinished:function(event,currentIndex){
                seve();
            }
        }).validate({
            errorPlacement:function(error,element){
                element.before(error)
            },rules:{
                brand:"required",
                model:"required",
                level:"required",
                color:"required",
                price:{
                    required: true,
                    isNumber:true
                },
                money:{
                    required: true,
                    isNumber:true
                },
                count:{
                    required: true,
                    digits:true
                },
                date:"date"
            }, messages: {

            }
                })
    })

    $(function(){
        $.post('${pageContext.request.contextPath}/user/queryuser',function(data){
            var s = "" ;
            $.each(data,function (index,item) {
                s = s + "<option value="+item.id+">"+item.workname+"</option>";
                console.log(item.workname);
            })
            $("#staffadd").html(s) ;
        }) ;

        $.post('${pageContext.request.contextPath}/supplier/cha',function(data){
            var s = "" ;
            $.each(data,function (index,item) {
                s = s + "<option value="+item.id+">"+item.name+"</option>";
                console.log(item.name);
            })
            $("#supplierAdd").html(s) ;
        }) ;
    })
    function toAddCar() {
        $("#addFrom input").val("");
        var rows = $("#myTb").bootstrapTable("getSelections") ;
        if (rows.length==0){
            $("#addModal").modal("show");
        }else if(rows.length==1) {
            $("#modelAdd2").modal("show");
            var carinfo = rows[0].carConfig.id+"-"+rows[0].brand +"-"+rows[0].model+"-"+rows[0].carConfig.level+"-"+rows[0].carConfig.color;
            $("#addFrom [name=brand]").val(rows[0].brand);
            $("#addFrom [name=model]").val(rows[0].model);
            $("#addFrom [name=level]").val(rows[0].carConfig.level);
            $("#addFrom [name=color]").val(rows[0].carConfig.color);
            $("#addFrom [name=cid]").val(rows[0].carConfig.id);
            $("#addBrand2").val(carinfo);
            //$("#price").val(rows[0].carConfig.price);
            $.post('${pageContext.request.contextPath}/supplier/cha',function(data){
                var s = "" ;
                $.each(data,function (index,item) {
                    s = s + "<option value="+item.id+">"+item.name+"</option>";
                    console.log(item.name);
                })
                $("#supplier").html(s) ;
            }) ;
            $.post('${pageContext.request.contextPath}/user/queryuser',function(data){
                var s = "" ;
                $.each(data,function (index,item) {
                    s = s + "<option value="+item.id+">"+item.workname+"</option>";
                    console.log(item.workname);
                })
                $("#staff2").html(s) ;
            }) ;
        }else{
            swal("提示信息！", "请选择一条数据或不选择", "error");
        }
    }
    function doAdd(){
        var params = $("#addFrom").serialize();
        var upPurchase = decodeURIComponent(params,true);
        console.log(upPurchase);
        $.ajax({
            'type':'post',
            'url':'/carsss/addCarCount',
            'data':upPurchase,
            success:function(data){

                if (data>0){
                    swal("提示信息", "成功!", "success");
                } else{
                    //友好的提示
                    swal("提示信息", "失败!", "error");
                }

                $.post("${pageContext.request.contextPath}/car/query",function (data) {
                    $("#myTb").bootstrapTable("load",data);
                });
                //关闭对话框
                $("#modelAdd2").modal('hide') ;
            }
        })
    }
</script>